<template>
    <div class="panel-body  panel-home">
        <div class="panel-header">
            <div class="panel-title">
                {{ meta_name }}
            </div>
        </div>
        <div class="panel-main">
            <div class="panel-btns">
                <el-button type="success" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
                <el-button size="small" type="info" icon="fa fa-reply-all" @click="back()"> 返回</el-button>
            </div>
            <v-chart  style="clear: both;padding-top:15px" v-loading="loading"
                      element-loading-text="努力加载中..."
                      element-loading-spinner="el-icon-loading"
                      tooltip-effect="dark" :options="option"/>
        </div>
    </div>
</template>
<!---->
<script>
import {mapGetters} from 'vuex';
import {UserAgent} from '@/utils/request';
import VChart from "vue-echarts";
import 'echarts';
export default {
    components: {VChart},
    computed: {
        ...mapGetters(['meta_name','loading','upload']),
    },
    data() {
        return {
            listData: [],//列表数据
            params: {page: 1},
            option : {
                // darkMode: true,
                // backgroundColor: "#100C2A",
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series:[
                    {
                        type: 'tree',
                        data: [{
                            "name": '',
                            "children": []
                        }],

                        top: '1%',
                        left: '7%',
                        bottom: '2%',
                        right: '20%',

                        symbolSize: 7,

                        label: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right'
                        },

                        leaves: {
                            label: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        },

                        emphasis: {
                            focus: 'descendant'
                        },

                        expandAndCollapse: true,

                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            }
        }
    },
    activated() {
        this.$store.dispatch('setActive', '/user');
        this.option.series[0].data[0].name = this.$route.query.name;
        this.list();
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        //列表
        list(){
            let id = this.$route.query.id;
            if(!id){
                this.$notify.error({title: 'ERROR', message: '参数错误'});return false;
            }
            this.option.series[0].data[0].children = [];
            this.$store.dispatch('setLoading', true);
            UserAgent({params: {id: id}}).then((res)=>{
                if (res.code) {
                    this.$notify.error({title: 'ERROR', message: res.msg});
                } else {
                    this.listData = res.data;
                    res.data.ones.forEach((one) => {
                        let _one =  {
                                "name": one.username,
                                "children": []
                            };
                        res.data.twos.forEach((two) => {
                            if(two.agent_one == one.id){
                                let _two =  {
                                    "name": two.username,
                                };
                                _one.children.push(_two);
                            }
                        });
                        this.option.series[0].data[0].children.push(_one);
                    })
                }
                this.$store.dispatch('setLoading', false);
            })
        },
    }
}
</script>
